import React, {PropTypes} from 'react';
import {List, Group} from 'amazeui-touch';
import {connect} from 'react-redux';
import Action from '../store/actions';
import {bindActionCreators} from 'redux';
import {Link} from 'react-router';
import union from 'lodash/union';
import iScroll from 'iscroll/build/iscroll-probe';
import ReactIScroll from '../scripts/index';
import Loading from './Loading'

@connect(
    state => ({...state}),
    dispatch => bindActionCreators(Action, dispatch)
)
export default class Goods extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            getListByMenu: [],
            currentPage: 1,
            pageSize: 4,
            lastPage: false
        };
    }

    componentWillMount() {
        this.loadData();
    };

    handleRefresh(downOrUp, callback) {
        let {currentPage, lastPage} = this.state;
        if (downOrUp === 'up') { // 加载更多
            if (currentPage === 5) {
                lastPage = true;
            } else {
                currentPage++;
            }
        } else { // 刷新
            lastPage = false;
            currentPage = 1;
        }
        this.setState({
            currentPage,
            lastPage
        }, () => {
            this.loadData(downOrUp, callback);
        });
    }

    loadData(downOrUp, callback) {
        const {currentPage, pageSize} = this.state;
        this.props.getGoodList(this.props.location.query.menuId, currentPage, pageSize);
        const {getListByMenu} = this.state;
        this.setState({
            getListByMenu: downOrUp === 'up' ? union(getListByMenu, this.props.home.good.goodInfo.getListByMenu) : this.props.home.good.goodInfo.getListByMenu
        });
        if (callback && typeof callback === 'function') {
            callback();
        }
    }

    render() {
        if (this.props.home.good.goodInfo.RET_CODE === "error") {
            return (<Loading/>);
        }
        else {
            const {getListByMenu} = this.state;
            return (
                <div className="scroll">
                    <ReactIScroll iScroll={iScroll} handleRefresh={this.handleRefresh.bind(this)}>
                        <Group
                            header="商品列表"
                            noPadded
                        ><List>
                            {getListByMenu.map(
                                (item, index) => {
                                    const imgSrc = "http://10.0.1.24:8080/pic/" + item.image;
                                    return (
                                        <Link key={index} to={{pathname: `/GoodDetail`, query: {goodId: item.id}}}>
                                            <List.Item
                                                media={<img width="100" src={imgSrc}/>}
                                                desc={item.detail}
                                                after={"价格："+item.price+"|"+item.oldPrice}
                                                title={item.name}
                                                subTitle={<div></div>}
                                            />
                                        </Link>
                                    );
                                }
                            )}
                        </List>
                        </Group>
                    </ReactIScroll>
                </div>
            );
        }
    }
}
